<template>
	<view class="personal-info">
		<!-- <nav-bar title="我要入驻" color="black" bg="rgba(0,0,0,0)"></nav-bar> -->
		<u-cell-group>
			<view class='ul'>
				<view class='li'>
					<view slot="title" class="u-cell__title required">机构名称</view>
					<input class='catname' type="text" v-model="ordersList.institution" @input="nickInput"
						placeholder="请输入机构名称" />
				</view>
			</view>
			<view class='line'></view>
			<view class='ul'>
				<view class='li'>
					<view slot="title" class="u-cell__title required">企业名称</view>
					<input class='catname' type="text" v-model="ordersList.venue_name" @input="nickInput"
						placeholder="请输入企业名称" />
				</view>
			</view>
			<view class='line'></view>
			<view class='ul' style="height: 180rpx;">
				<view class='li' style="height: 180rpx;">
					<view slot="title" class="u-cell__title required">机构LOGO</view>
					<view class=""
						style="flex-direction: row; justify-content: center; display: flex; margin-top: 20rpx; align-items: flex-start;">
						<u-upload :fileList="fileList1" name="1" width="140rpx" height="140rpx" @afterRead="afterRead"
							@delete="deletePic" multiple :maxCount="1" />
						<view class=""
							style="width: 200rpx; white-space: pre-wrap; font-size: 22rpx; line-height: 30rpx; margin-top: calc(140rpx - (30rpx * 3) - 22rpx);">
							建议尺寸:<br />
							200x200px<br />
							支持格式:PNG、JPG
						</view>
					</view>

				</view>
			</view>
			<!-- <view class='uls'>
				<view class='li'>
					<u-upload :fileList="fileList1" name="1" width="140rpx" height="140rpx" @afterRead="afterRead"
						@delete="deletePic" multiple :maxCount="10" />
				</view>
			</view> -->
			<view class='line'></view>
			<view class='ul'>
				<view class='li'>
					<view slot="title" class="u-cell__title required">所在地区</view>
					<!-- <input class='catname' v-model="ordersList.citys" type="text" @click="showCityPicker = true"
						placeholder="请输入所在地区" disabled="" /> -->
					<pick-regions :defaultRegion="defaultRegionCode" @getRegion="handleGetRegion">
						<!-- <u-text :text="regionName" v-if="regionName" color="#303133"></u-text>
						<u-text text="请选择城市" v-else color="#c0c4cc"></u-text> -->
						<input class='catname' v-model="regionName" type="text" 
							placeholder="请输入所在地区" disabled="" />
					</pick-regions>
				</view>
			</view>
			<view class='line'></view>
			<view class='ul' style="height: 140rpx;">
				<view class='li'>
					<view slot="title" class="u-cell__title required">培训项目</view>
					<!-- <input class='catname' type="text" v-model="ordersList.username" @input="nameInput"
						placeholder="请选择培训项目" /> -->
					<view class="item">
						<view class="flex-space-between week-list">
							<view class="week-item" :class="{'active':weekSelect.includes(item)}"
								v-for="item in weekList" :key="item" @click="handSelect(item)">
								{{item.name}}
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class='line'></view>
			<view class='ul'>
				<view class='li'>
					<view slot="title" class="u-cell__title required">负责人姓名</view>
					<input class='catname' type="text" v-model="ordersList.user_name" @input="nameInput"
						placeholder="请输入负责人名字" />
				</view>
			</view>
			<view class='line'></view>
			<view class='ul'>
				<view class='li'>
					<view slot="title" class="u-cell__title required">手机号</view>
					<input class='catname' type="number" v-model="ordersList.phone" maxlength="11"
						placeholder="请输入手机号" />
				</view>
			</view>
			<view class='line'></view>
			<view class='ul'>
				<view class='li' style="flex-direction: row;align-items: center;display: flex;">
					<view slot="title" class="u-cell__title required">验证码</view>
					<input class='catname in_put' type="text" v-model="ordersList.code" @input="yanInput"
						placeholder="请输入验证码" />
					<button class="btn_yan" @click="startCountdown" :disabled="counting">{{ buttonText }}</button>
					<!-- <view class=""
						style="display: flex;flex-direction: row;align-items: center;justify-content: center;width: 140rpx;height: 100rpx;">
						<jp-verification-literalness @getCode="getCode"
							:securityCode="securityCode"></jp-verification-literalness>
					</view> -->
				</view>
			</view>
			<view class='line'></view>
			<view class='ul'>
				<view class='li'>
					<view slot="title" class="u-cell__title required">登录密码</view>
					<input class='catname' type="text" v-model="ordersList.pass_word" placeholder="请输入登录密码"/>
				</view>
			</view>
			<!-- <view class='line'></view>
			<view class='ul'>
				<view class='li'>
					<view slot="title" class="u-cell__title required">确认密码</view>
					<input class='catname' type="text" v-model="ordersList.confirm_password" placeholder="请输入确认密码" />
				</view>
			</view> -->
			<!-- <view class='ul'>
				<view class='li'>
					<view slot="title">场馆描述</view>
					<input class='catname' type="text" v-model="ordersList.base_age" @input="base_ageInput"
						placeholder="请输入场馆描述" />
				</view>
			</view>
			<view class='line'></view> -->
			<!-- <view class='ul'>
				<view class='li'>
					<view slot="title">邮箱</view>
					<input class='catname' type="text" v-model="ordersList.base_age" @input="base_ageInput"
						placeholder="请输入邮箱" />
				</view>
			</view>
			<view class='line'></view>

			<view class='ul'>
				<view class='li'>
					<view slot="title">体验开始日期</view>
					<input class='catname' type="text" v-model="ordersList.value1" @click="timeInput" placeholder="请选择体验开始日期" />

				</view>
			</view>
			<view class='line'></view>
			<view class='ul'>
				<view class='li'>
					<view slot="title">体验结束日期</view>
					<input class='catname' type="text" v-model="ordersList.value1" @input="dataInput" placeholder="请选择验结束日期" />
				</view>
			</view>
			<view class='line'></view> -->

		</u-cell-group>
		<!-- <view style="width: 100%; height: auto;background: #fff; padding: 20rpx 30rpx;
			background-color: white;
			border-radius: 7px;">
			<view style="width: 100%;height: 40rpx;font-size: 26rpx;
								font-weight: 500;
								color: #333333;">备注</view>
			<textarea placeholder=" 请填写备注" class="input-textare" height="200rpx" margin-top='20rpx'
				placeholder-style="font-size: 26rpx" v-model="order_remarks" />
		</view> -->

		<!-- <view class="btns flex-between" >
			<u-button text="立即申请" shape="circle" color="rgb(249,52,66)" @click="save" size="large"></u-button>
		</view> -->
		<view class="d-flex flex-row justify-space-between justify-center align-center"
			style="position: fixed;bottom: 0;height: 120rpx;background-color: #fff;width: 100%;padding: 0 8%;z-index: 99;">
			<view class="" @click="$antiClicks(save)"
				style="width: 100%;height: 80rpx;background: linear-gradient(0deg, rgba(214, 53, 53, 0.9), rgba(255, 64, 64, 0.93), rgba(250, 142, 142, 0.93));
				border-radius: 80rpx 80rpx;color: #ffffff;font-size: 24rpx;text-align: center;border-radius: 35rpx;line-height: 80rpx;">
				立即申请
			</view>
		</view>
		<!-- <button class="confirm-btn" shape="circle" @click="save()">
			立即申请
		</button> -->
		<u-picker :show="showCityPicker" :columns="columns" @confirm="confirmCity" ref="uPicker"
			@cancel="showCityPicker = false" @change="changeHandler" />
		<u-datetime-picker v-model="Default" :show="showBirthdayPicker" mode="date" @confirm="confirmBirthday"  :minDate="-845628841" :maxDate="2856778555000"
			@cancel="showBirthdayPicker = false" />
	</view>
</template>

<script>
	const venues = require("@/api/venues/venues.js");
	import pickRegions from '@/page_venues/components/pick-regions/pick-regions.vue'
	import {
		formatDate
	} from '@/utils/util.js';
	export default {
		components: {
			pickRegions
		},
		data() {
			return {
				anoClick: true,
				showInsurancePicker: false,
				userInfo: {
					value1: "",
				},
				city: '',
				isEdit: false,
				ordersList: {
					value1: "",
					pass_word: "", //密码
					confirm_password: "", //再次确认密码
					code: "", //验证码
					institution: "", //机构名称
					venue_name: "", //企业名称
					user_name: "", //负责人名称
					phone: "", //手机号码
					projects: "", //项目
					logo: "", //图片
					citys: "", //城市
				},
				xiugai: true,
				base_height: '',
				base_sex: '',
				card_num: '',
				base_age: '',
				username: '',
				fileList1: [],
				url_phone: '',
				url_phoneimg: false,
				heading: '',
				columns: {
					insurance: [
						['男', '女']
					]
				},
				counting: false, // 是否正在倒计时
				countdown: 60, // 倒计时时长，单位为秒
				buttonText: '验证码', // 按钮文本
				// minDate: new Date(new Date().getFullYear() - 100, 0, 1).getTime(),
				// maxDate: Date.now(),
				Default: Date.now(),
				showBirthdayPicker: false,
				columns: [
					["北京市", "天津市", "河北省", "山西省", "内蒙古自治区", "辽宁省"],
					["北京市"],
				],
				columnData: [
					["北京市"],
					["天津市"],
					["石家庄市", "唐山市", "秦皇岛市", "邯郸市", "邢台市", "保定市", "张家口市", "承德市", "沧州市", "廊坊市", "衡水市"],
					["太原市", "大同市", "阳泉市", "长治市", "晋城市", "朔州市", "晋中市", "运城市", "忻州市", "临汾市", "吕梁市"],
				],
				showCityPicker: false,
				weekList: [],
				weekSelect: [], //选中的
				securityCode: 'stpc',
				defaultRegion: [],
				defaultRegionCode: '440113',
				defaultRegionCode: '',
				region: [],
			}
		},
		computed: {
			regionName() {
				// 转为字符串
				return this.region.map(item => item.name).join(' ')
			}
		},
		onShow() {
			let _this = this;
			setTimeout(function() {
				_this.$refs.verCodes.init()
			}, 500)
		},
		onLoad({
			edit = false
		}) {
			this.isEdit = !!edit;
			this.xiugai = true
			this.getProject()
		},
		methods: {
			// 获取选择的地区
			handleGetRegion(region) {
				// let province = {}
				this.region = region
				// this.ordersList.province = region[0].code
				// this.ordersList.city = region[1].code
				this.city = region[2].code
				region.forEach((item, index) => {
					// province[item.name] = item.code
				});
			},
			
			getCode() {
				this.securityCode = '122f'
			},
			async getProject() {
				let params = {};
				let res = await venues.getProject(params);
				if (res.code === 1) {
					this.weekList = res.data
				}
			},
			handSelect(data) {
				if (this.weekSelect.includes(data)) {
					this.weekSelect = this.weekSelect.filter((item) => {
						return item !== data
					})
				} else {
					this.weekSelect.push(data)
				}
				const idsArray = this.weekSelect.map(item => item.id);
				this.ordersList.projects = idsArray
			},
			confirmBirthday({
				value
			}) {
				this.ordersList.value1 = formatDate(value, 'YYYY-MM-DD');
				this.showBirthdayPicker = false;
			},
			timeConfirm(data) {
				this.timeValue = data.value;
				this.showBirthdayPicker = true;
			},
			// 手机号码验证码
			async startCountdown() {
				if (this.counting) {
					return;
				}
				if (!this.ordersList.phone) {
					uni.$u.toast('请输入手机号码');
					return;
				}
				// 开始倒计时
				this.counting = true;
				this.buttonText = `${this.countdown}s`;

				const timer = setInterval(() => {
					if (this.countdown > 0) {
						this.countdown--;
						this.buttonText = `${this.countdown}s`;
					} else {
						// 倒计时结束
						this.counting = false;
						this.countdown = 60;
						this.buttonText = '验证码';
						clearInterval(timer);
					}
				}, 1000);
				let params = {
					phone: this.ordersList.phone
				};
				let res = await venues.sendCode(params);
				if (res.code === 1) {
					
				}
			},

			// 城市
			confirmCity({
				value
			}) {
				this.city = value.join('/');
				this.showCityPicker = false;
			},
			changeHandler(e) {
				const {
					columnIndex,
					value,
					values, // values为当前变化列的数组内容
					index,
					// 微信小程序无法将picker实例传出来，只能通过ref操作
					picker = this.$refs.uPicker
				} = e
				// 当第一列值发生变化时，变化第二列(后一列)对应的选项
				if (columnIndex === 0) {
					// picker为选择器this实例，变化第二列对应的选项
					picker.setColumnValues(1, this.columnData[index])
				}
			},

			confirmPicker({
				value
			}, key) {
				this.ordersList[key] = value.join('');
				// if (this.formData[key] == '是') {
				// 	this.formData.insurance = 1
				// } else{
				// 	this.formData.insurance = 0
				// }
				this[`show${key[0].toUpperCase() + key.slice(1)}Picker`] = false;
			},
			// avatarimage() {
			// 	this.heading = ''
			// 	this.url_phoneimg = false
			// },
			// 删除图片
			deletePic(event) {
				this[`fileList${event.name}`].splice(event.index, 1)
			},
			// 新增图片
			// 新增图片
			async afterRead(event) {
				// 当设置 mutiple 为 true 时, file 为数组格式，否则为对象格式
				let lists = [].concat(event.file)
				let fileListLen = this[`fileList${event.name}`].length
				lists.map((item) => {
					this[`fileList${event.name}`].push({
						...item,
						status: 'uploading',
						message: '上传中'
					})
				})
				for (let i = 0; i < lists.length; i++) {
					const result = await this.uploadFilePromise(lists[i].url)
					let item = this[`fileList${event.name}`][fileListLen]
					this[`fileList${event.name}`].splice(fileListLen, 1, Object.assign(item, {
						status: 'success',
						message: '',
						url: this.url_phone
					}))
					fileListLen++
				}
			},
			uploadFilePromise(url) {
				return new Promise((resolve, reject) => {
					let a = uni.uploadFile({
						url: 'https://sass-test.doit10019.com/api/upload/uploadOneImage', // 仅为示例，非真实的接口地址
						filePath: url,
						name: 'file',
						formData: {
							// user: 'test',
							project_id: getApp().globalData.projectId,
							app_id: this.$https.weixinAppId,

						},
						success: (res) => {
							let result = JSON.parse(res.data);
							this.url_phone = result.data.url
							setTimeout(() => {
								resolve(this.url_phone)
							}, 1000)
						}
					});
				})
			},

			timeInput() {
				this.showBirthdayPicker = true;
			},

			// 人脸录入
			faceEntry() {
				if (!this.isEdit) return;
				uni.navigateTo({
					url: '/pages_a/face-entry/face-entry'
				});
			},

			nameInput(e) {
				this.ordersList.username = e.detail.value
			},
			nickInput(e) {
				this.ordersList.nickname = e.detail.value
			},

			yanInput(e) {
				this.ordersList.yanzhen = e.detail.value
			},

			base_heightInput(e) {
				this.ordersList.base_height = e.detail.value
			},
			base_sexInput(e) {
				this.ordersList.base_sex = e.detail.value
			},
			card_numInput(e) {
				this.ordersList.card_num = e.detail.value
			},
			base_ageInput(e) {
				this.ordersList.base_age = e.detail.value
			},
			// 保存
			async save() {
				if (!this.ordersList.institution) {
					uni.$u.toast('请输入机构名称');
					return;
				}
				if (!this.ordersList.venue_name) {
					uni.$u.toast('请输入企业名称');
					return;
				}
				if (!this.url_phone) {
					uni.$u.toast('请输入图片');
					return;
				}
				if (!this.city) {
					uni.$u.toast('请输入城市');
					return;
				}
				if (!this.ordersList.projects) {
					uni.$u.toast('请输入项目');
					return;
				}
				if (!this.ordersList.user_name) {
					uni.$u.toast('请输入负责人');
					return;
				}
				if (!this.ordersList.phone) {
					uni.$u.toast('请输入手机号');
					return;
				}
				if (!this.ordersList.pass_word) {
					uni.$u.toast('请输入登录密码');
					return;
				}
				// if (!this.ordersList.confirm_password) {
				// 	uni.$u.toast('请输入确认密码');
				// 	return;
				// }
				// if (this.ordersList.pass_word != this.ordersList.confirm_password) {
				// 	uni.$u.toast('两次密码不一样');
				// 	return;
				// }

				let params = {
					pass_word: this.ordersList.pass_word, //密码
					code: this.ordersList.code, //验证码
					institution: this.ordersList.institution, //机构名称
					venue_name: this.ordersList.venue_name, //企业名称
					user_name: this.ordersList.user_name, //负责人名称
					phone: this.ordersList.phone, //手机号码
					projects: this.ordersList.projects, //项目
					logo: this.url_phone, //图片
					citys: this.city, //城市
					// confirm_password: this.ordersList.confirm_password ,//确认密码
					share_from:  uni.getStorageSync("phoneperson") //分销人
				};
				let res = await venues.register(params);
				if (res.code === 1) {
					uni.$u.toast(res.info);
					uni.reLaunch({
						url: '/page_venues/login/login'
					})
				}else{
					uni.$u.toast(res.info);
				}
			},
		}
	}
</script>

<style lang="scss" scoped>
	.personal-info {
		background-color: #f7f7f7;
		min-height: 100vh;
		// padding-bottom: calc(190rpx + env(safe-area-inset-bottom));

		.confirm-btn {
			width: 90%;
			height: 80rpx;
			line-height: 80rpx;
			background: linear-gradient(0deg, rgba(214, 53, 53, 0.9), rgba(255, 64, 64, 0.93), rgba(250, 142, 142, 0.93));
			border-radius: 40rpx;
			text-align: center;
			color: #fff;
			float: inherit;
			margin: 100rpx 38rpx 25rpx 38rpx;

		}

		/deep/.u-cell-group {
			background-color: #fff;
			flex-grow: 0;

			.u-cell-group__wrapper>.u-line {
				display: none;
			}

			.u-cell__body {
				padding: 0 18rpx 0 32rpx;
				height: 110rpx;
			}

			.u-cell__title {
				color: #333;
				font-size: 32rpx !important;
				font-weight: 500;

				&.required {
					&::before {
						content: '*';
						color: #fb2222;
					}
				}
			}

			.u-cell__value {
				color: #999;
			}
		}

		.btns {
			position: fixed;
			bottom: 0;
			left: 0;
			width: 100%;
			padding: 30rpx;
			padding-bottom: calc(30rpx + env(safe-area-inset-bottom));

			/deep/.u-button {
				&+.u-button {
					margin-left: 20rpx;
				}
			}
		}

		.wrap {
			overflow: hidden;
		}

		.ul {
			width: 92%;
			height: 110rpx;
			margin: auto;
		}

		.uls {
			width: 92%;
			height: 160rpx;
			margin: auto;

			.li {
				width: 100%;
				height: 160rpx;
				line-height: 160rpx;
				display: flex;
				justify-content: space-between;
				align-items: center;
			}
		}

		.li {
			width: 100%;
			height: 110rpx;
			line-height: 110rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
		}

		.item {
			// padding: 29rpx 30rpx 30rpx;
			padding: 25rpx 30rpx 20rpx 30rpx;

			.item-title {
				color: rgb(153, 153, 153);
				font-size: 28rpx;
				font-weight: 500;
				margin-bottom: 20rpx;
			}

			.value {
				color: rgb(51, 51, 51);
				font-size: 28rpx;
				font-weight: 500;
			}

			.time-cell {
				color: rgb(51, 51, 51);
				font-size: 28rpx;
				font-weight: 500;
				justify-content: flex-start;

				.time {
					width: 49%;

					&:last-of-type {
						margin-left: 20rpx;
					}
				}
			}

			.week-list {
				display: grid;
				grid-template-columns: repeat(5, 1fr);
				grid-gap: 20rpx;
				position: relative;
				// flex-direction: row;
				// width: 650rpx;
				// font-size: 24rpx;
				// flex-wrap: wrap;
				// display: flex;

				.week-item {
					// padding: 15rpx 0;
					background-color: rgb(243, 243, 243);
					border-radius: 5rpx;
					text-align: center;
					color: rgb(51, 51, 51);
					font-size: 24rpx;
					font-weight: 500;
					border: solid 2rpx transparent;
					box-sizing: border-box;
					height: 40rpx;
					line-height: 40rpx;
				}

				.active {
					color: rgba(255, 98, 0, 1);
					background-color: rgba(255, 65, 5, 0.1);
					// border: solid 2rpx rgb(99, 93, 247);
					position: relative;
					height: 40rpx;
					line-height: 40rpx;
					// &:before {
					// 	display: block;
					// 	content: '';
					// 	position: absolute;
					// 	width: 27rpx;
					// 	height: 28rpx;
					// 	right: -2rpx;
					// 	bottom: -2rpx;
					// 	background-image: url("https://jiangsudiantuo2022.oss-cn-hangzhou.aliyuncs.com/img/46b1cc85fcb0fd76095daf823b7d2bb4a3235519.png");
					// 	background-repeat: no-repeat;
					// 	background-size: 100%;
					// }
				}

				.check {
					color: rgb(51, 51, 51);
					font-size: 24rpx;
					position: absolute;
					bottom: 10rpx;
					right: 0;
				}
			}
		}


		.li .left {
			font-size: 32rpx;
			color: #333;
			text-align: left;
		}


		.catname {
			width: 370rpx;
			color: #999;
			margin-left: 10rpx;
			// margin-top: 40rpx;
			font-size: 26rpx;
		}

		.in_put {
			// margin-left: 120rpx;
		}

		.btn_yan {
			width: 20vw;
			height: 9vw;
			background: linear-gradient(0deg, rgba(250, 142, 142, 0.93), rgba(255, 64, 64, 0.93), rgba(250, 142, 142, 0.93));
			color: #fff;
			border: none;
			line-height: 9vw;
			font-size: 25rpx;
			margin-right: 0rpx;
			// margin-top: 20rpx;
		}

		.catnames {
			color: #999 !important;
			font-size: 26rpx;
		}

		input {
			text-align: right;
		}

		.line {
			width: 100%;
			height: 1rpx;
			background-color: #e6e6e6
		}



	}
</style>